import React,{useState} from "react";
import MicButtonImg from '../../../resources/images/mic.svg';
import MicButtonImgOff from '../../../resources/images/micOff.svg';

const MicButton = () => {
    const [isMicMuted, setIsMicMuted] = useState(false);
    const img = isMicMuted ? MicButtonImgOff : MicButtonImg;
    
    const handleMicButtonPressed = () => {
        setIsMicMuted(!isMicMuted);
    }
    
	return (
        <div className='video_button_container'>
            <img src={img} onClick={handleMicButtonPressed} className='video_button_image'/>
		</div>
	)
}

export default MicButton;
